import React, { PureComponent } from 'react';
import moment from 'moment';
import { Table, Badge,Avatar} from 'antd';
import styles from './index.less';

const statusMap = ['processing','default',  'success', 'error'];
class msgTable extends PureComponent {
  state = {
    selectedRowKeys: [],
    totalCallNo: 0,
  };

  componentWillReceiveProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      this.setState({
        selectedRowKeys: [],
        totalCallNo: 0,
      });
    }
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    const totalCallNo = selectedRows.reduce((sum, val) => {
      return sum + parseFloat(val.callNo, 10);
    }, 0);

    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }

    this.setState({ selectedRowKeys, totalCallNo });
  }

  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  }

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  }

  render() {
    const { selectedRowKeys, totalCallNo } = this.state;
    const { data: { list, pagination }, loading } = this.props;

    const auditStatus = ['通过', '忽略'];
    const playStatus = ['已播', '忽略'];
    const sourceMap = ['来自微信', '来自APP'];
    const columns = [
      {
        title: '用户',
        dataIndex: 'name',
        width:160,
        render:(text, record, index) => (
          <div>
            <div>
              <Avatar style={{ verticalAlign: 'middle' }} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"  />
              <span style={{ marginLeft: 6, verticalAlign: 'middle' }} >
                  {text}
              </span>
            </div>
            <span style={{ verticalAlign: 'middle',color:"#8f8f8f",fontSize:10 }} >
                  {sourceMap[record.source]}
                </span>
          </div>
        )
      },
      {
        title: '消息内容',
        dataIndex: 'content',
      },
      {
        title: '自动翻译',
        dataIndex: 'translation',
      },
      {
        title: '发送位置',
        dataIndex: 'addressCode',
      },{
        title: '发送时间',
          dataIndex: 'sendDate',
        sorter: true,
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      },{
        title: '审核人',
        dataIndex: 'guideName',
      },{
        title: '播报主播',
        dataIndex: 'anchorName',
      },{
        title: '审核状态',
        dataIndex: 'auditStatus',
        filters: [
          {
            text: auditStatus[0],
            value: 0,
          },
          {
            text: auditStatus[1],
            value: 1,
          },
        ],
        render(val) {
          return <Badge status={statusMap[val]} text={auditStatus[val]} />;
        },
      },{
        title: '播报状态',
        dataIndex: 'playStatus',
        filters: [
          {
            text: playStatus[0],
            value: 0,
          },
          {
            text: playStatus[1],
            value: 1,
          },
        ],
        render(val) {
          return <Badge status={statusMap[val]} text={playStatus[val]} />;
        },
      },

      {
        title: '操作',
        render: () => (
          <div>
            <a href="">删除</a>
          </div>
        ),
      },
    ];

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.msgTable}>
        <Table
          loading={loading}
          rowKey={record => record.id}
          rowSelection={rowSelection}
          dataSource={list}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}

export default msgTable;
